<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取DOM元素</title>
    <style>
        /* 盒子 宽高 背景色 */
        .盒子 {
            width: 200px;
            height: 200px;
            /*background-color: red;*/
        }
    </style>
</head>
<body>
<h3>获取DOM对象</h3>
<p>
    查找元素DOM元素就是利用 JS 选择页面中标签元素 <br><br>

    1. 根据CSS选择器来获取DOM元素 (重点) <br>
    2. 其他获取DOM元素方法（了解）
</p>
<hr>

<h2>根据CSS选择器来获取DOM元素 (重点)</h2>
<p>
    1. 选择匹配的 第一个元素 <br>
    语法： <br>
    document.querySelector('CSS选择器') <br>
    <br>
    参数: <br>
    包含一个或多个有效的CSS选择器 字符串 <br>
    <br>
    返回值： <br>
    CSS选择器匹配的第一个元素,一个 HTMLElement对象。 <br>
    如果没有匹配到，则返回null。
</p>
<p>
    2. 选择匹配的 多个元素 <br>
    语法： <br>
    document.querySelectorAll('CSS选择器 CSS选择器') <br>
    <br>
    参数: <br>
    包含一个或多个有效的CSS选择器 字符串 <br>
    <br>
    返回值： <br>
    CSS选择器匹配的NodeList 对象集合 <br>
    <br>
    例如： <br>
    document.querySelectorAll('ul li')
</p>
<hr>

<p>
    document.querySelectorAll('CSS选择器 CSS选择器') <br>
    得到的是一个 伪数组： 有长度有索引号的数组 <br>
    但是没有 pop() push() 等数组方法 <br>
    <br>
    想要得到里面的每一个对象，则需要遍历（for）的方式获得。 <br>
    哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
</p>

<hr>
<hr>
<pre style="font-size: 22px;">
    <strong>总结</strong>
    1. 获取页面中的标签我们最终常用那两种方式？
          querySelectorAll()
          querySelector()

    2. 他们两者的区别是什么？
          querySelector() 只能选择一个元素， 可以直接操作
          querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素

    3. 他们两者小括号里面的参数有神马注意事项？
          里面写css选择器
          <span style="color: red">必须是字符串，也就是必须加引</span>
</pre>
<hr>

<h3>其他获取DOM元素方法（了解）</h3>
<img src="其他获取DOM元素方法.png" alt="">
<hr>

<!--演示 部分-->

<div class="盒子">123</div> <!-- 2个 div 标签 -->
<div class="盒子">abc</div>

<p id="id选择器_p">导航栏</p>

<ul class="测试">
    <li>测试111111</li>
    <li>测试222222</li>
    <li>测试333333</li>
</ul>


<script>
    // 1. 获取匹配的 第一个元素, 注意只是第一个标签
    const 盒子 = document.querySelector('div') // 必须加引号,不然看作是变量了
    console.log(盒子) // 注意看控制台输出信息, 是第一个 div 的信息
    console.dir(盒子) // 这种输出是, 看对象的属性和方法. 可以输出信息,证明这个是个 对象
    console.log('------------------------')
    盒子.style.backgroundColor = '#933535' // 可以直接对获取的对象修改. 这里是给盒子加背景色

    // 我要获取第二个小 li
    const 第二个_li = document.querySelector('ul li:nth-child(2)') // 因为li在ul里,所以要加上ul. 和CSS里选择器写法一样
    console.log(第二个_li)  // 控制台看输出
    console.dir(第二个_li)
    console.log('------------------------')

    // 2. 获取匹配的所有的元素.  这里选择所有的小li
    const 所有的_li = document.querySelectorAll('.测试 li')
    console.log(所有的_li) // 这里输出的就是 数组, 数组里的元素是 对象
    console.dir(所有的_li)
    console.log('------------------------')
    // 通过for循环对每一个对象操作(这里的对象是 li标签)
    for (let i = 0; i < 所有的_li.length; i++) {
        所有的_li[i].style.color = '#21e021' // 对每个对象操作, 这里是每个li标签 文字颜色
    }

    // 通过querySelectAll() 获取过来的也是一个伪数组，哪怕里面只有一个元素而已
    const p标签 = document.querySelectorAll('#id选择器_p')
    p标签[0].style.fontSize = '40px' // 对象的操作方法, 这里是修改文字的大小
                                    // 证明 p标签 是一个数组, 虽然里面只有一个元素
</script>
</body>
</html>